<template>
    <div class="page">
        <gzg-search :config="searchConfig"
                    :showMore="true" 
                    :form="searchForm"
                    :label-width="120"
                    @search="search"></gzg-search>
        <div class="tool-wrap">    
            <div class="item">
                <div class="label">订单数:</div>
                <div class="val">{{ stat_data.count_num }}</div>
            </div>
            <div class="item">
                <div class="label">订单金额:</div>
                <div class="val">{{ stat_data.order_subtotal }}</div>
            </div>
            <div class="item">
                <div class="label">已扣金额:</div>
                <div class="val">{{ stat_data.deducted_total }}</div>
            </div>
            <div class="item">
                <div class="label">未扣金额:</div>
                <div class="val">{{ stat_data.surplus_deduct_total }}</div>
            </div> 
            <el-button class="btn" type="primary" @click="exportExcel">导出</el-button>

        </div>
        <div class="grid-wrap">
            <el-table style="width:100%;"
                              height="100%"
                              :border="true"
                              :data="listData.data">
                <el-table-column label="序号" type="index" width="60px" fixed="left"></el-table-column>
                <el-table-column label="商家名称" prop="company_name" width="180px" fixed="left"></el-table-column>
                <el-table-column label="订单信息" prop="order_no" min-width="300px">
                    <template #default="props">
                        <div class="grid-form">
                            <div class="grid-form-item">
                                <div class="label">订单号:</div>
                                <div class="val">{{ props.row.order_no }}</div>
                            </div>
                            <div class="grid-form-item">
                                <div class="label">订单状态:</div>
                                <div class="val">{{ props.row.order_status_desc }}</div>
                            </div>
                            <div class="grid-form-item">
                                <div class="label">商品名称:</div>
                                <div class="val">{{ props.row.product_name }}</div>
                            </div>
                            <div class="grid-form-item">
                                <div class="label">下单时间:</div>
                                <div class="val">{{ props.row.create_at }}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="用户信息" prop="product_name" min-width="120px">
                    <template #default="props">
                        <div>
                            <div>{{ props.row.buy_name }}</div>
                            <div>{{ props.row.buy_mobile }}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="渠道信息" prop="subtotal" min-width="180px">
                    <template #default="props">
                        <div class="grid-form">
                            <div class="grid-form-item">
                                <div class="label">服务商:</div>
                                <div class="val">{{ props.row.agent_service_name }}</div>
                            </div>
                            <div class="grid-form-item">
                                <div class="label">区域渠道:</div>
                                <div class="val">{{ props.row.agent_partner_name }}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="订单总金额" prop="subtotal" width="120px"></el-table-column>
                <el-table-column label="分期数" prop="period_num" width="100px"></el-table-column>
                <el-table-column label="扣款周期" prop="deducted_cycle_desc" width="180px"></el-table-column>
                <el-table-column label="前面期数" prop="before_cycle_num" width="180px"></el-table-column>
                <el-table-column label="前面每期金额" prop="before_period_amount" width="180px"></el-table-column>
                <el-table-column label="后面每期金额" prop="after_period_amount" width="180px"></el-table-column>
                <el-table-column label="已扣金额" prop="deducted_total" width="180px"></el-table-column>
                <el-table-column label="已扣期数" prop="deducted_period_num" width="180px"></el-table-column>
                <el-table-column label="未扣金额" prop="surplus_deduct_total" width="180px"></el-table-column>
          

            </el-table>
        </div>
        <div class="page-wrap">
            <el-pagination
                v-model:current-page="params.page"
                v-model:page-size="params.page_size"
                :page-sizes="[100, 200, 300, 400]"
                layout="total, prev, pager, next"
                :total="listData.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, watch, computed ,onMounted } from 'vue'


import { getAlipayOrderList,getExportAlipayOrderList } from 'services/order'

import { assign } from 'lodash'

const searchForm = reactive({
    company_name:'',
    order_status:'',
    order_no:'',
    start_date:'',
    end_date:''
})

const searchConfig = reactive([{
    id:'company_name',
    label:'商户全称',
    placeholder:'请输入商户全称',
    type: 'input'
},{
    id:'order_status',
    label:'订单状态',
    placeholder:'请输入商户全称',
    type: 'select',
    enum:'zfb_order_status_list'
},{
    id:'start_date',
    label:'下单开始日期',
    placeholder:'请选择下单开始日期',
    type:'date'
},{
    id:'end_date',
    label:'下单结束日期',
    placeholder:'请选择下单结束日期',
    type:'date'
},{
    id:'order_no',
    label:'订单编号',
    placeholder:'请输入订单编号',
    type:'input'

}])

const listData = reactive({
    total:0,
    data:<any>[]
})

const params = ref({
    company_name:'',
    page_size:  20,
    page:  1,
})

const stat_data = ref({
    count_num:'',
    order_subtotal:'',
    deducted_total:'',
    surplus_deduct_total:''
})

const search = (searchParams:any) => {

    assign(params.value, searchParams)

    console.log(params.value)
    params.value.page = 1

    getList()
}

const handleSizeChange = (val: number) => {
    params.value.page_size = val
    params.value.page = 1
    getList();
}

const handleCurrentChange = (val:number) => {
    params.value.page = val
    getList()
} 

const getList = () => {
    getAlipayOrderList(params.value).then(res => {
        if (params.value.page == 1) {
            stat_data.value = res.stat_data || {
                count_num:'0',
                order_subtotal:'0',
                deducted_total:'0',
                surplus_deduct_total:'0'
            }
        }
        

        listData.total = parseInt(res.total_rows)
        listData.data = res.items || []
    })
}


const exportExcel = () => {
    getExportAlipayOrderList(params.value).then(res => {
        const link = document.createElement('a');
        link.href = res.download_url;
        link.setAttribute('download', '支付宝代扣订单.csv');
        link.click();
        link.remove()
    })
}

onMounted(() => {
    getList()
})
</script>